<template>
  <div>
    <el-dialog
      :visible="detailDialog"
      width="60%"
      :before-close="closeDialog"
      top="5vh"
      :close-on-click-modal="false"
    >
      <div class="dialogTitle" slot="title">详情</div>
      <div class="dialogBox">
        <div class="thirdDiv">
          <div class="tableItem">
            <div class="labelTitle">隐患名称：</div>
            <div class="labelValue">{{problemDetail.dangerName}}</div>
          </div>
          <div class="tableItem tableItem2">
            <div class="labelTitle">隐患描述：</div>
            <div class="labelValue">{{problemDetail.dangerDescribe}}</div>
          </div>
        </div>

        <div class="thirdDiv">
          <div class="tableItem">
            <div class="labelTitle">隐患等级：</div>
            <div class="labelValue">{{problemDetail.dangerGradeName}}</div>
          </div>
          <div class="tableItem">
            <div class="labelTitle">隐患来源：</div>
            <div class="labelValue">{{problemDetail.dangerSourceName}}</div>
          </div>
          <div class="tableItem">
            <div class="labelTitle">隐患类别：</div>
            <div class="labelValue">{{problemDetail.dangerKindName}}</div>
          </div>
        </div>

        <div class="thirdDiv">
          <div class="tableItem">
            <div class="labelTitle">治理类型:</div>
            <div class="labelValue">{{problemDetail.governKindName}}</div>
          </div>
          <div class="tableItem tableItem2">
            <div class="labelTitle">隐患治理期限：</div>
            <div class="labelValue">{{problemDetail.governTime}}</div>
          </div>
        </div>

        <div class="thirdDivImg">
          <div class="tableItem">
            <div class="labelTitle">隐患图片:</div>
            <div class="labelValue2">
              <img v-if="problemDetail.dangerImg1" :src="problemDetail.dangerImg1" alt="" />
              <img v-if="problemDetail.dangerImg2" :src="problemDetail.dangerImg2" alt="" />
              <img v-if="problemDetail.dangerImg3" :src="problemDetail.dangerImg3" alt="" />
            
            </div>
          </div>
        </div>

        <div class="boxTitle">隐患整改信息</div>
        <div class="thirdDiv">
          <div class="tableItem">
            <div class="labelTitle">整改负责人:</div>
            <div class="labelValue">{{problemDetail.changeResponerName}}</div>
          </div>
          <div class="tableItem">
            <div class="labelTitle">整改完成时间:</div>
            <div class="labelValue">{{problemDetail.changeResponerTime}}</div>
          </div>
          <div class="tableItem">
            <div class="labelTitle">联系方式:</div>
            <div class="labelValue">{{problemDetail.changeResponerPhone}}</div>
          </div>
        </div>
        <div class="thirdDivImg">
          <div class="tableItem">
            <div class="labelTitle">整改图片:</div>
            <div class="labelValue2">
              <img v-if="problemDetail.changeResponerImg1" :src="problemDetail.changeResponerImg1" alt="" />
              <img v-if="problemDetail.changeResponerImg2" :src="problemDetail.changeResponerImg2" alt="" />
              <img v-if="problemDetail.changeResponerImg3" :src="problemDetail.changeResponerImg3" alt="" />
            
            </div>
          </div>
        </div>

        <div class="boxTitle">隐患验收信息</div>
        <div class="thirdDiv">
          <div class="tableItem">
            <div class="labelTitle">验收负责人:</div>
            <div class="labelValue">{{problemDetail.checkResponerName}}</div>
          </div>
          <div class="tableItem">
            <div class="labelTitle">验收意见:</div>
            <div class="labelValue">{{problemDetail.checkResponerStatus=='1'?'通过':'未通过'}}</div>
          </div>
          <div class="tableItem">
            <div class="labelTitle">验收备注:</div>
            <div class="labelValue">{{problemDetail.checkResponerRemark}}</div>
          </div>
        </div>
        <div class="thirdDiv">
          <div class="tableItem">
            <div class="labelTitle">联系方式:</div>
            <div class="labelValue">{{problemDetail.changeResponerPhone}}</div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="addBtn" type="primary" @click="submit"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToDoListApi } from "@/api/problemPage/problemRegister";
export default {
  name: "addProblem",
  props: {
    detailDialog: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      problemDetail:{}
    };
  },
  created() {},
  methods: {
    async submit() {
      this.closeDialog();
    },
    closeDialog() {
      this.$emit("update:detailDialog", false); // 触发父组件更新
    },
    async getDetail(id) {
      const res = await getToDoListApi({
        id,
      });
      this.problemDetail = res.data;
      console.log(res);
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.dialogTitle {
  position: relative;
  padding-left: 10px; /* 调整文本与颜色条之间的间距 */
  font-weight: bold;
}
.dialogTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 2px;
  transform: translateY(-50%);
  width: 4px; /* 颜色条的宽度 */
  height: 14px; /* 颜色条的高度 */
  background-color: #0077ff; /* 颜色条的颜色 */
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog__body {
  padding-right: 50px !important;
}
::v-deep .dialog-footer {
  text-align: center;
  .addBtn {
    background: #0077ff;
    border-radius: 4px 4px 4px 4px;
    border: none;
    color: #fff;
  }
}
.dialogBox {
  padding: 10px;
  .thirdDiv {
    border: 1px solid #e9edeb;
    height: 40px;
    display: flex;
    .tableItem {
      display: flex;
      align-items: center;
      width: 384px;
      .labelTitle {
        background: #f4f6f5;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 10px;
        border: 1px solid #e9edeb;
      }
    }
    .tableItem2 {
      width: 768px;
    }
  }

  .thirdDivImg {
    border: 1px solid #e9edeb;
    // height: 104px;
    .tableItem {
      display: flex;
      align-items: center;
      width: 384px;
      .labelTitle {
        background: #f4f6f5;
        width: 120px;
        height: 104px;
        line-height: 104px;
        text-align: center;
        margin-right: 10px;
        border: 1px solid #e9edeb;
        box-sizing: border-box;
      }
      .labelValue2 {
        // padding: 12px;
        img {
          width: 80px;
          height: 80px;
          margin-right: 5px;
        }
      }
    }
  }
  .boxTitle {
    display: flex;
    align-items: center;
    color: #000; /* 文本颜色 */
    font-size: 16px; /* 文本大小 */
    white-space: nowrap; /* 防止换行 */
    margin: 20px;
  }

  .boxTitle::before,
  .boxTitle::after {
    content: "";
    flex: 1; /* 占据剩余空间 */
    height: 1px; /* 虚线高度 */
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 50%,
      #ccc 30%,
      #ccc 80%
    ); /* 虚线效果 */
    background-size: 8px 1px; /* 控制虚线间隔 */
    background-repeat: repeat-x;
  }

  .boxTitle::before {
    margin-right: 10px; /* 文本与左边虚线的间距 */
  }

  .boxTitle::after {
    margin-left: 10px; /* 文本与右边虚线的间距 */
  }
}
</style>
